<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html>
<!-- saved from url=(0048)http://stevenliu.ngrok.cc/Web001/html/login.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>登入</title>
		<script src="${pageContext.request.contextPath }/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.css" />
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrapValidator.min.js"></script>	
	<style type="text/css">
		body {
		    border: medium none;
		    margin: 0;
		    padding: 0;
		    width: 100%;
		}
		
		.headerWrap {
		    width: 100%;
		    height: 127px;
		    background: url('${pageContext.request.contextPath }/img/logo.jpg') no-repeat;
		    background-position-y: 71%;
		    background-position-x: 56.5%;
		    min-width: 1290px;
		    display: block;
		}
		
		.header {
			text-align:center;
		}
		
		.mandatory {
			color:RED;
			text-align:left!important;
			font-weight:normal;
		}
	</style>
	<script type="text/javascript">
		// $(function(){}) 等价于 <body onload="function(){}"> 
		$(function() {
			// $("#registerForm") 等价于 document.getElementById("registerForm");
			$("#registerForm").bootstrapValidator({
				message : '该值不合法',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					userid : {
						message : '用户名不合法',
						validators : {
							notEmpty : { //非空验证
								message : '用户名不能为空'
							},
							stringLength : { // 长度验证
								min : 1,
								max : 20,
								message : '用户名长度需为6-20'
							},
							regexp : { // 正则式验证
								regexp : /^[0-9a-zA-Z_]+$/,
								message : '用户名只能为字母、数字、下划线'
							},
							different: { //不同验证
		                        field: 'upassword',
		                        message: '用户名不能与密码相同'
		                    },
						}
					} //用户名验证结束
				// end of fields
			});
		});

		// 改变验证码图片
		function changeValidateImage() {
			var img = document.getElementById("validateImage");
			img.src = "${basePath}/validationCode.do?t=" + (new Date()).valueOf();
		}

		// 重置按钮的点击事件
		function resetForm() {
			$('#registerForm').data('bootstrapValidator').resetForm(true);
		}
	</script>
</head>
<body>
	<div class="headerWrap"></div>
	<div class="container">

		<form id="registerForm" class="form-horizontal bv-form" novalidate="novalidate" action="${pageContext.request.contextPath}/user/toLogin.do"  method="post">
		  <div class="form-group header">
		  	<h5 class="col-sm-11">${msg }</h5>
		  </div>
		  <div class="form-group header">
		  	<h4 class="col-sm-11">用户登录</h4>
		  </div>
		  
		  <div class="form-group has-feedback">
		    <label for="userid" class="col-sm-2 control-label">用户名</label>
		    <div class="col-sm-4">
		      <input type="text" class="form-control" id="userid" name="userid" placeholder="请填写用户名" data-bv-field="userid"><i class="form-control-feedback" data-bv-icon-for="userid" style="display: none;"></i>
		    <small class="help-block" data-bv-validator="notEmpty" data-bv-for="userid" data-bv-result="NOT_VALIDATED" style="display: none;">用户名不能为空</small><small class="help-block" data-bv-validator="stringLength" data-bv-for="userid" data-bv-result="NOT_VALIDATED" style="display: none;">用户名长度需为6-20</small><small class="help-block" data-bv-validator="regexp" data-bv-for="userid" data-bv-result="NOT_VALIDATED" style="display: none;">用户名只能为字母、数字、下划线</small><small class="help-block" data-bv-validator="different" data-bv-for="userid" data-bv-result="NOT_VALIDATED" style="display: none;">用户名不能与密码相同</small></div>
		    <label for="userid" class="col-sm-5 control-label mandatory">*(6~20 字符，可用数字、字母、下划线)</label>
		  </div>
		  
		  <div class="form-group has-feedback">
		    <label for="upassword" class="col-sm-2 control-label">密码</label>
		    <div class="col-sm-4">
		      <input type="password" class="form-control" id="upassword" name="password" placeholder="请填写密码" data-bv-field="upassword"><i class="form-control-feedback" data-bv-icon-for="upassword" style="display: none;"></i>
		    <small class="help-block" data-bv-validator="notEmpty" data-bv-for="upassword" data-bv-result="NOT_VALIDATED" style="display: none;">密码不能为空</small><small class="help-block" data-bv-validator="stringLength" data-bv-for="upassword" data-bv-result="NOT_VALIDATED" style="display: none;">密码长度需为6-20</small><small class="help-block" data-bv-validator="regexp" data-bv-for="upassword" data-bv-result="NOT_VALIDATED" style="display: none;">密码只能为字母、数字、下划线</small><small class="help-block" data-bv-validator="different" data-bv-for="upassword" data-bv-result="NOT_VALIDATED" style="display: none;">密码不能与用户名相同</small></div>
		    <label for="upassword" class="col-sm-5 control-label mandatory">*(6~20 字符，可用数字、字母、下划线)
		    </label>
		  </div>
	  	  <div class="form-group">
			   <div class="col-sm-offset-2 col-sm-6">
			      <button type="submit" class="btn btn-primary">登入</button>
			      <button type="reset" class="btn btn-primary" onclick="javascript:resetForm();">重置</button>
			   </div>  
	      </div>
		</form>
	</div>
</body>
</html>